<template>
    <el-drawer title="我是标题" :visible.sync="dialogVisible" :with-header="false" class="demand_box" size='600px' @close="resetForm('addForm')">
        <div class="flexbox flexcolumn height_100">
            <div class="demand_head flexbox flexcenter flexbetween">
                <span class="demand_title">修改需求</span>
                <span class="icon_btn icon_btn_32"><img src="../../assets/img/close_check.svg" alt="" @click="resetForm('addForm')"></span>
            </div>
            <div class="demand_center flex" :class="{'gaydm_bg':step==2}">
                <el-form label-position="top" style="margin-top:-10px" :model="addForm" size="medium" :hide-required-asterisk='true' ref="addForm" :rules="addVideoMultiSzRules" class="dialog_form">
                    <el-form-item label="品牌/产品" prop="short_name">
                        <el-row :gutter="12">
                            <el-col :span="12">
                                <el-form-item prop="brand_id">
                                    <el-select v-model="brandSelect" placeholder="请选择品牌" value-key='brand_id' style="width:100%" @change="selectBrand">
                                        <el-option :label="item.brand_name+filters.chanelName(item.channel)" :value="item" v-for="item in brandList" :key="item.brand_id">
                                            <span>{{item.brand_name}}{{filters.chanelName(item.channel)}}</span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item prop="product_id">
                                    <el-select v-model="addForm.product_id" placeholder="请选择产品" style="width:100%" :disabled="!addForm.brand_id" @change="selectProduct">
                                        <el-option :label="item.name" :value="item.product_id" v-for="item in productList" :key="item.product_id"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item label="业务场景" prop="business_scene">
                        <el-select v-model="addForm.business_scene" :disabled="!addForm.product_id" placeholder="请选择业务场景" style="width:100%">
                            <el-option :label="item.scene_name" :value="item.business_scene" v-for="item in sceneList" :key="item.business_scene"></el-option>
                        </el-select>
                    </el-form-item>
                    <div class="demands_title flexbox flexcenter flexbetween font_14 color_01">编导人员</div>
                    <el-form-item label="编导" prop="centre_uid" :rules="{required: true, message: '请选择', trigger: ['blur','change']}" size="small">
                        <el-select v-model="addForm.centre_uid" placeholder="编导" style="width:100%">
                            <el-option :label="item_uid.nickname" :value="item_uid.id" v-for="item_uid in centreList" :key="item_uid.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <div class="demands_title flexbox flexcenter flexbetween font_14 color_01">
                        <div>剪辑人员</div>
                        <el-link type="primary" icon="el-icon-plus" :underline="false" @click="addClip(index)">添加</el-link>
                    </div>
                    <el-row :gutter="12">
                        <el-col :span="12" v-for="(items,indexs) in addForm.executor_uid" :key="indexs">
                            <el-form-item :label="`剪辑${indexs+1}`" size="small" style="margin-bottom:10px">
                                <div class="flexbox flexcenter flexbetween">
                                    <el-form-item label="" :prop="`executor_uid.${indexs}.user_id`" :rules="{required: true, message: '请选择', trigger: ['blur','change']}" size="small">
                                        <el-select v-model="items.user_id" placeholder="剪辑" style="width:150px">
                                            <el-option label="默认剪辑" :value="0"></el-option>
                                            <el-option :label="item_id.nickname" :value="item_id.id" v-for="item_id in optimiList" :key="item_id.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="" :rules="{required: true, message: '请选择', trigger: ['blur','change']}" size="small">
                                        <el-input-number class="resetNumBtn" v-model="items.quantity" controls-position="right" :min="1" style="width:80px"></el-input-number>
                                    </el-form-item>
                                    <el-link icon="el-icon-delete" :underline="false" @click="deletClip(indexs)"></el-link>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div class="demand_footer flexbox flexcenter">
                <el-button plain size="small" class="el-button-width" @click="resetForm('addForm')">取 消</el-button>
                <el-button type="primary" size="small" class="el-button-width" @click="submitForm('addForm')" :loading="loading" :disabled='loading'>完成</el-button>
            </div>
        </div>
    </el-drawer>
</template>

<script>
export default {
    props:["queryInfo"],
    name: "",
    data() {
        return {
            loading: false,
            dialogVisible: false,
            brandSelect: {},
            brandList: [], //品牌列表
            productList: [], //产品列表
            sceneList: [], //业务场景列表
            optimiList: [], //剪辑列表
            centreList: [], //核心创意人
            addForm: {
                id: "",
                year: "",
                week: "",
                brand_id: "",
                product_id: "",
                channel: "",
                business_scene: "",
                centre_uid: "",
                executor_uid: [
                    {
                        user_id: "",
                        quantity: 1,
                    },
                ],
            },
            addVideoMultiSzRules: {
                brand_id: [
                    {
                        required: true,
                        message: "请选择品牌",
                        trigger: ["blur", "change"],
                    },
                ],
                product_id: [
                    {
                        required: true,
                        message: "请选择产品",
                        trigger: ["blur", "change"],
                    },
                ],
                business_scene: [
                    {
                        required: true,
                        message: "请选择业务场景",
                        trigger: ["blur", "change"],
                    },
                ],
            },
        };
    },
    created() {},
    methods: {
        getData(row) {
            let data = JSON.parse(JSON.stringify(row))
            this.dialogVisible = true;
            this.addForm.id = data.id;
            this.addForm.year = data.year;
            this.addForm.week = data.week;
            this.addForm.brand_id = data.brand_id;
            this.addForm.product_id = data.product_id;
            this.addForm.channel = data.channel;
            this.addForm.business_scene = data.business_scene;
            this.addForm.centre_uid = data.centre_uid;
            this.addForm.executor_uid = data.executor_uid;
            this.brandSelect = {
                brand_id:data.brand_id,
                brand_name:data.brand_name,
                channel:data.channel,
            }
            this.getBrandList();
            this.getOptimization();
            this.getCentreList();
            this.getSceneList()
            this.getProductList()
        },
        //获取品牌列表
        async getBrandList() {
            const { data: res } = await this.$http.post(
                "adminapi/project/brandList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.brandList = res.data;
            }
        },

        // 获取产品
        async getProductList() {
            const { data: res } = await this.$http.post(
                "adminapi/project/productList",
                {
                    brand_id: this.addForm.brand_id,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.productList = res.data;
            }
        },

        // 获取业务场景
        async getSceneList() {
            const { data: res } = await this.$http.post(
                "adminapi/project/sceneList",
                {
                    brand_id: this.addForm.brand_id,
                    product_id: this.addForm.product_id,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.sceneList = res.data;
            }
        },

        // 获取剪辑列表
        async getOptimization() {
            const { data: res } = await this.$http.post(
                "adminapi/company/szClipperList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.optimiList = res.data;
            }
        },

        // 获取核心创意人列表
        async getCentreList() {
            const { data: res } = await this.$http.post(
                "adminapi/company/szCentreList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.centreList = res.data;
            }
        },

        //品牌选择
        selectBrand() {
            this.addForm.brand_id = this.brandSelect.brand_id;
            this.addForm.channel = this.brandSelect.channel;
            this.addForm.product_id = "";
            this.addForm.business_scene = "";
            this.getProductList();
        },

        // 产品选择
        selectProduct() {
            this.addForm.business_scene = "";
            this.getSceneList();
        },

        // 提交添加
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    this.loading = true;
                    const { data: res } = await this.$http.post(
                        "adminapi/demandsz/demandEdit_v2",
                        this.addForm
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        this.loading = false;
                        return;
                    } else {
                        this.$message({
                            message: "修改成功",
                            type: "success",
                        });
                        this.loading = false;
                        this.$emit("getDataList", this.queryInfo.page);
                        this.$emit("getDataCount");
                        this.resetForm(formName);
                    }
                } else {
                    this.loading = false;
                    return false;
                }
            });
        },

        // 添加剪辑
        addClip() {
            this.addForm.executor_uid.push({
                user_id: "",
                quantity: 1,
            });
        },

        // 删除剪辑
        deletClip(index) {
            if (this.addForm.executor_uid.length <= 1) {
                return;
            } else {
                this.addForm.executor_uid.splice(index, 1);
            }
        },

        // 关闭重置表单
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.step = 1;
            this.brandSelect = {};
            this.addForm = {
                id: "",
                year: "",
                week: "",
                brand_id: "",
                product_id: "",
                channel: "",
                business_scene: "",
                centre_uid: "",
                executor_uid: [
                    {
                        user_id: "",
                        quantity: 1,
                    },
                ],
            };
            this.dialogVisible = false;
        },
       
    },
    computed: {},
    components: {},
};
</script>

<style scoped>
.step_boxs {
    height: 48px;
    background: #fff;
    border-radius: 6px;
    padding: 0 20px;
    font-size: 14px;
    color: #616c85;
    margin-top: 10px;
}
.step_boxs span {
    color: #17233d;
    max-width: 230px;
    overflow: hidden;
    height: 14px;
    line-height: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gaydm_bg {
    background: #f2f4f7;
}
.demands_box {
    background: #fff;
    border-radius: 6px;
    margin-top: 12px;
    padding: 20px;
}
.demands_num {
    background: rgba(165, 177, 209, 0.1);
    border-radius: 3px;
    height: 28px;
    padding: 0 8px;
    font-size: 14px;
    color: #616c85;
}
.demands_num span {
    border-left: 1px solid #ebebeb;
    margin: 0 9px;
    height: 12px;
}
.demands_btn {
    line-height: 28px;
    height: 28px;
    width: 72px;
    border-radius: 4px;
    font-size: 14px;
    text-align: center;
    margin-left: 8px;
    cursor: pointer;
}
.demands_btn.blue {
    color: #4475ff;
    background: rgba(22, 93, 255, 0.05);
}
.demands_btn.red {
    color: #fe6262;
    background: rgba(254, 98, 98, 0.05);
}
.demands_title {
    margin-top: 24px;
    margin-bottom: 12px;
}
/deep/ .resetNumBtn .el-icon-arrow-up:before {
    content: "\e78f";
}
/deep/ .resetNumBtn .el-input-number__decrease,
/deep/ .resetNumBtn .el-input-number__increase {
    background: #fff;
}
/deep/ .resetNumBtn.el-input-number.is-controls-right .el-input__inner {
    padding-left: 5px;
    padding-right: 35px;
}
</style>


